
// flex布局
@mixin n-row1 {
	display: flex;
	align-items: center;
}

@mixin n-row2 {
	display: flex;
	justify-content: center;
	align-items: center;
}


@mixin n-row3 { 
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

@mixin n-row4 {
	display: flex;
	justify-content: space-around;
	align-items: center;
}

@mixin n-row5 {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@mixin n-col1 {
	display: flex;
	flex-direction: column;
}

@mixin n-col2 {
	display: flex;
	justify-content: center;
	flex-direction: column;
}

@mixin n-col3 {
	display: flex;
	justify-content: flex-end;
	flex-direction: column;
}

@mixin n-col4 {
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}

@mixin n-col5 {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
}


// 绝对定位布局
@mixin n-center {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
@mixin placeholder($color: rgba(34, 58, 153, 1)) {
 	&::-webkit-input-placeholder{
		color: $color;
	}
 }
@mixin n-scrollbar($size: 12px,$bg:rgba(4, 18, 82, 1),  $color: rgba(9, 61, 156, 1) ){
	&::-webkit-scrollbar {
		background: $bg;
		width: $size;
		height: $size;
	}
	
	&::-webkit-scrollbar-thumb {
		background: $color;
	}
	
	&::-webkit-scrollbar-button {
		display: none;
	}
}


html,body{
	background: #fff;
	height: 100%;
	margin: 0;
}

@font-face{
	font-family: oswald;              
	src: url(../font/Oswald-Bold.ttf);  
}

.n{
	
	&,* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
		color: inherit;
		font-family: inherit;
		font-size: inherit;
		font-style: normal;
		font-weight: inherit;
	}
	
	
	
	ul,
	ol,
	li,
	dl,
	dd,
	dt {
		list-style: none;
		list-style-type: none
	}
	
	input,
	textarea,
	button {
		-webkit-appearance: none;
		appearance: none;
		outline: none;
		background: none;
		border: 0;
	}
	
	/* 按钮鼠标指针 */
	input[type='button'],
	button {
		cursor: pointer;
		-moz-user-focus: none;
		user-select: none;
	}
	
	input[type='text'],
	input[type='password'],
	textarea {
		width: 100%;
	}
	
	a,
	i,
	a:hover,
	img,
	label {
		text-decoration: none;
		cursor: pointer;
	}
	
	table {
		border-collapse: collapse;
	}
	
}


$c: rgba(0, 255, 255, 1);

@mixin box{
	max-width: 1200px;
	width: 90%;
	margin: 0 auto;
}



.n-nav:not([__null__]){
	>div{
		height: 78px;
		@include n-row1;
	}
	.n-nav-logo{
		font-size: 36px;
		font-weight: bold;
		color: #fff;
	}
	.n-nav-links{
		margin-left: 95px;
		font-size: 18px;
		color: #fff;
		margin-right: auto;
		@include n-row3;
		height: 100%;
		border-bottom: 2px solid rgba(20, 65, 193, 1);
		align-items: stretch;
		>a{
			@include n-row2;
			position: relative;
			cursor: pointer;
		}
		>a+a{
			margin-left: 47px;
		}
		.n-nav-links-cur{
			color: $c;
			&::after{
				content: ' ';
				position: absolute;
				left: 50%;
				bottom: 0;
				width: 14px;
				border-radius: 50%;
				pointer-events: none;
				box-shadow: 0 0 20px 3px $c;
				border: 1px solid $c;
				height: 14px;
				background: #fff;
				transform: translate(-50%,50%);
				
			}
		}
		
	}
	.n-nav-btn{
		height: 44px;
		padding: 0 19px;
		color: rgba(158, 185, 253, 1);
		font-size: 18px;
		@include n-row2;
		border: 1px solid rgba(20, 65, 193, 1);
		&.n-nav-btnCur{
			background: rgba(20, 65, 193, 1);
			color: #fff;
			border: 0;
		}
		&.n-nav-btnText{
			border: 0;
			color: #fff;
			padding: 0;
			margin-left: 25px;
		}
	}
}

.n-footer:not([__null__]){
	background: rgba(0, 11, 58, 1);
	padding: 35px 0 52px 0;
	text-align: center;
	>img{
		margin: 0 auto;
		display: block;
		height: 28px;
	}
	>h3{
		margin-top: 27px;
		line-height: 1;
		font-size: 24px;
		color: rgba(140, 169, 251, 1);
	}
	>p{
		margin-top: 36px;
		line-height: 1.3;
		font-size: 18px;
		color: rgba(140, 169, 251, 1);
		
	}
	
}


.n-tb{
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	border: 1px solid rgba(20, 65, 193, 1);
	text-align: center;
	table-layout: fixed;
	td,th{
		padding: 16px;
		border-top: 1px solid rgba(20, 65, 193, 1);
		border-bottom: 1px solid rgba(20, 65, 193, 1);
	}
	thead{
		background: rgba(0, 23, 80, 1);
	}
	
	
	th{
		color: rgba(158, 185, 253, 1);
	}
	td{
		color: #fff;
	}
	.n-tb-cell{
		@include n-row2;
	}
	
	
	
}
.n-checkbox{
	border: 1px solid rgba(20, 65, 193, 1);
	background: rgba(0, 6, 56, 1);
	width: 24px;
	height: 24px;
	cursor: pointer;
	@include n-row2;
	position: relative;
	display: inline-flex;
	&.n-checkboxCheck{
		border: 0;
		background: rgba(20, 65, 193, 1);
		&::before{
			content: ' ';
			position: absolute;
			@include n-center;
			width: 55%;
			height: 25%;
			transform: translate(-50%,-60%) rotateZ(-45deg);
			border-left: 2px solid #fff;
			border-bottom: 2px solid #fff;
		}
	}
	
}



.n-page{
	@include n-row2;
	gap:8px;
	>button,>span{
		height: 32px;
		padding: 0 13px;
		background: rgba(0, 23, 80, 1);
		border: 1px solid rgba(20, 65, 193, 1);
		font-size: 16px;
		@include n-row2;
		color: rgba(158, 185, 253, 1);
	}
	>button{
		cursor: pointer;
	}
	.n-page-cur{
		background: rgba(20, 65, 193, 1);
		border: 0;
	}
}



.n-box{
	@include box;
}
.phome:not([__null__]){
	 
	@include n-scrollbar;
	height: 100vh;
	overflow: auto;
	background:  rgb(6,11,53);
	.phome-main{
		background: url(../images/14.png) no-repeat right center /cover;
	}
	.phome-content{
		padding: 161px 0 114px 0;
		>h1{
			font-size: 32px;
			color: #fff;
			
		}
		>h2{
			color: $c;
			line-height: 1.6;
			font-size: 36px;
			margin: 63px 0;
		}
		>p{
			@include n-row1;
			font-size: 24px;
			color: #fff;
			line-height: 1;
			&+p{
				margin-top: 36px;
			}
			>i{
				width: 17px;
				border-radius: 50%;
				box-shadow: 0 0 20px 3px $c;
				border: 1px solid $c;
				height: 17px;
				background: #fff;
				margin-right: 20px;
			}
			&+h3{
				margin-top: 70px;
			}
		}
		>h3{
			height: 40px;
			background: url(../images/5.png) no-repeat left center / auto 100%;
			@include n-row1;
			padding-left: 61px;
			color: rgba(245, 220, 9, 1);
			font-size: 24px;
		}
		>article{
			margin-top: 21px;
			color: #fff;
			height: 201px;
			line-height: 1.6;
			font-size: 18px;
			padding: 61px 18px 63px 51px;
			width:827px;
			transform: translate(-20px);
			background: url(../images/2.png) no-repeat left center / auto 100%;
			&+h3{
				margin-top: 34px;
				background: url(../images/6.png) no-repeat left center / auto 100%;
			}
			&+h3+article{
				transform: translate(-30px);
				width: 1111px;
				padding: 53px 45px 59px 52px;
				height: 249px;
				background: url(../images/1.png) no-repeat left center / auto 100%;
			}
		}
	}
	 
}



.ppm:not([__null__]){
	@include n-scrollbar;
	height: 100vh;
	overflow: auto;
	padding-bottom: 300px;
	background:  rgb(6,11,53) url(../images/10.png) no-repeat  center top /cover;
	.ppm-logo{
		display: block;
		margin: 0 auto;
		height: 100px;
		margin-top: 48px;
	}
	.ppm-search{
		margin-top: 38px;
		@include box;
		max-width: 813px;
		>div{
			@include n-row1;
			height: 64px;
			font-size: 30px;
			align-items: stretch;
			>input{
				color: #333;
				border: 0;
				border: 1px solid rgba(69, 94, 250, 1);
				border-right: 0;
				padding: 0 20px;
				background: #fff;
				width:100%;
				flex: 1;
			}
			>button{
				color: #fff;
				background: rgba(20, 65, 193, 1);
				padding: 0 36px;
				flex-shrink: 0;
				border: 0;
			}
		}
		>footer{
			margin-top: 16px;
			@include n-row1;
			gap:16px;
			flex-wrap: wrap;
			align-content: flex-start;
			>i{
				color: rgba(158, 185, 253, 1);
				font-size: 18px;
				@include n-row2;
				background: rgba(4, 18, 82, 1);
				border: 1px solid rgba(20, 65, 193, 1);
				height: 40px;
				padding: 0 20px;
			}
		}
	}
	.ppm-tb{
		border: 1px solid rgba(15, 51, 161, 1);
		margin-top: 60px;
		padding: 45px;
		.ppm-tb-line{
			display: grid;
			grid-auto-rows: 64px;
			grid-template-columns: repeat(18,1fr);
			>li{
				width: 100%;
				height: 100%;
				
				min-width: 0;
				min-height: 0;
				
			}
		}
		.ppm-tb-item{
			@include n-col2;
			align-items: center;
			background: url(../images/12.png) no-repeat center / 100% 100%;
			>h3{
				color: #fff;
				line-height: 1;
				font-size: 24px;
			}
			>p{
				font-size: 16px;
				line-height: 1;
				color: rgba(158, 185, 253, 1);
				margin-top: 5px;
			}
		}
		.ppm-tb-itemCur{
			background: url(../images/11.png) no-repeat center / 100% 100%;
			
		}
	}
	.ppm-title{
		height: 44px;
		position: relative;
		@include n-row3;
		align-items: stretch;
		gap:24px;
		>em{
			height: 100%;
			@include n-row2;
			width: 200px;
			@include n-center;
			font-size: 16px;
			color: rgba(158, 185, 253, 1);
			border-bottom: 2px solid rgba(15, 51, 161, 1);
		}
		>button{
			@include n-row2;
			padding: 0 22px;
			gap:18px;
			cursor: pointer;
			background: rgb(4,18,82);
			border: 1px solid rgba(20, 65, 193, 1);
			color: rgba(15, 255, 255, 1);
			font-size: 16px;
			>img{
				height: 20px;
			}
		}
		>img{
			width: 44px;
			height: 44px;
		}
	}
	.ppm-list{
		margin-top: 50px;
		padding: 40px;
		box-shadow: 0 0 30px 1px rgba(15, 51, 161, 1);
		border: 1px solid rgba(15, 51, 161, 1);
		padding: 20px;
		
		.n-tb{
			margin-top: 19px;
			.n-tb-cell{
				gap:9px;
			}
			tbody>tr{
				
				background: rgba(0, 6, 56, 1);
				&:nth-child(2n){
					background: rgba(0, 23, 80, 1);
				}
			}
		}
		.n-page{
			margin-top: 32px;
		}
	}
	
	
	.ppm-form{
		margin-top: 50px;
		padding: 40px;
		box-shadow: 0 0 30px 1px rgba(15, 51, 161, 1);
		border: 1px solid rgba(15, 51, 161, 1);
		padding: 20px;
		>h3{
			gap:12px;
			>em{
				width: 400px;
			}
			
		}
		
		.ppm-form-content{
			padding: 24px;
			background: rgba(0, 23, 80, 1);
			border: 1px solid rgba(20, 65, 193, 1);
			margin-top: 19px;
			
			>div{
				line-height: 1.8;
				font-size: 16px;
				color: #fff;
			}
			>ul{
				@include n-row5;
				flex-wrap: wrap;
				margin-top: 30px;
				align-content: flex-start;
				gap:10px 0;
				>li{
					flex: 0 0 40%;
					height: 33px;
					width: 0;
				}
				.ppm-form-input{
					border-bottom: 1px solid rgba(20, 65, 193, 1);
					@include n-row1;
					gap: 10px;
					font-size: 16px;
					>span{
						flex: 0 0 100px;
						color: #fff;
						width: 0;
					}
					>input{
						border: 0;
						background: none;
						color: rgba(158, 185, 253, 1);
						flex: 1;
						width: 100%;
						
					}
					
				}
			}
		}
		.ppm-form-sub{
			width: 146px;
			height: 44px;
			margin: 0 auto;
			margin-top: 30px;
			@include n-row2;
			padding: 0 22px;
			gap:18px;
			cursor: pointer;
			background: rgb(4,18,82);
			border: 1px solid rgba(20, 65, 193, 1);
			color: rgba(15, 255, 255, 1);
			font-size: 16px;
			>img{
				height: 20px;
			}
		}
	}
}

 

.ptracing:not([__null__]){
	height: 100vh;
	background: rgb(6,11,53);
	.ptracing-main{
		width: 1089px;
		margin-top: 198px;
		background:  url(../images/7.png) no-repeat  center / cover;
		height: 579px;
		font-size: 30px;
		color: rgba(158, 185, 253, 1);
		text-align: center;
		padding-top: 44px;
	}
}

.pupload:not([__null__]){
	@include n-scrollbar;
	height: 100vh;
	overflow: auto;
	background: rgb(6,11,53)  url(../images/21.png) no-repeat center bottom / cover;
	.pupload-oper{
		height: 602px;
		margin-top: 32px;
		background: url(../images/23.png) no-repeat center / cover;
		@include n-row2;
		gap:40px;
		padding-bottom: 32px;
		align-items: flex-end;
		>div{
			width: 40%;
			cursor: pointer;
			max-width: 480px;
			height: 200px;
			@include n-col2;
			align-items: center;
			background: rgb(17,31,112);
			border: 1px solid rgba(20, 65, 193, 1);
			>img{
				height: 99px;
			}
			>p{
				margin-top: 10px;
				font-size: 30px;
				color: #fff;
				>em{
					color: rgba(23, 168, 252, 1);
				}
			}
		}
		
	}
	
	.pupload-tb{
		margin-top: 50px;
		padding: 40px;
		box-shadow: 0 0 30px 1px rgba(15, 51, 161, 1);
		border: 1px solid rgba(15, 51, 161, 1);
		padding: 20px;
		>h3{
			height: 44px;
			position: relative;
			@include n-row3;
			align-items: stretch;
			>em{
				flex: 1;
				margin-right: 43px;
				width: 0;
				font-size: 16px;
				letter-spacing: -0.8px;
				color: rgba(158, 185, 253, 1);
				border-bottom: 2px solid rgba(15, 51, 161, 1);
			}
			>button{
				@include n-row2;
				padding: 0 22px;
				margin-right: 24px;
				gap:18px;
				cursor: pointer;
				background: rgb(4,18,82);
				border: 1px solid rgba(20, 65, 193, 1);
				color: rgba(15, 255, 255, 1);
				font-size: 16px;
				>img{
					height: 20px;
				}
			}
			>img{
				width: 44px;
				height: 44px;
			}
		}
		>h4{
			margin-top: 19px;
			padding: 0 24px;
			color: #fff;
			font-size: 16px;
			height: 44px;
			@include n-row1;
			background: rgba(0, 23, 80, 1);
			border: 1px solid rgba(20, 65, 193, 1);
			>img{
				margin-left: 31px;
				height: 32px;
			}
			>button{
				margin-left: auto;
				border: 0;
				@include n-row3;
				gap: 18px;
				color: rgba(0, 255, 255, 1);
				>img{
					height: 20px;
				}
			}
		}
		>article{
			border: 1px solid rgba(20, 65, 193, 1);
			border-top: 0;
			height: 472px;
			background: rgba(0, 6, 56, 1);
			padding: 24px;
			overflow: auto;
			@include n-scrollbar;
			.n-tb{
				td,th{
					padding: 10px;
					border: 1px solid rgba(20, 65, 193, 1);
				}
			}
		}
	}
	
	.pupload-sub{
		width: 146px;
		height: 44px;
		margin: 0 auto;
		margin-top: 30px;
		@include n-row2;
		padding: 0 22px;
		gap:18px;
		cursor: pointer;
		background: rgb(4,18,82);
		border: 1px solid rgba(20, 65, 193, 1);
		color: rgba(15, 255, 255, 1);
		font-size: 16px;
		>img{
			height: 20px;
		}
	}
}



.pregister:not([__null__]){
	
	@include n-scrollbar;
	height: 100vh;
	overflow: auto;
	background:  rgb(6,11,53) url(../images/21.png) no-repeat center bottom / cover;
	
	.pregister-icon{
		margin: 0 auto;
		margin-top: 40px;
		@include n-col1;
		align-items: center;
		padding-bottom: 26px;
		border-bottom: 2px solid rgba(20, 65, 193, 1);
		width: 200px;
		color: rgba(158, 185, 253, 1);
		>img{
			height: 32px;
			margin-bottom: 16px;
		}
	}
	.pregister-form{
		max-width: 760px;
		margin-top: 24px;
		input{
			background: rgba(0, 6, 56, 1);
			border: 1px solid rgba(20, 65, 193, 1);
			height: 40px;
			color: #fff;
			padding: 0 15px;
		}
		.pregister-form-line{
			@include n-row1;
			margin-bottom: 24px;
			>span{
				width: 0;
				letter-spacing: -0.5px;
				font-size: 16px;
				color: #fff;
				flex: 0 0 300px;
				text-align: right;
				padding-right: 22px;
			}
			>input{
				width: 100%;
				flex: 1;
			}
		}
		.pregister-form-code{
			>img{
				margin-left: 10px;
				height: 40px;
				width: 136px;
				flex-shrink: 0;
			}
		}
		.pregister-form-upload{
			align-items: flex-start;
			
			>div{
				@include n-row1;
				flex-wrap: wrap;
				gap:10px;
				>img{
					object-fit: cover;
					width: 64px;
					height: 64px;
				
				}
				
			}
		}
	}
	.pregister-sub{
		width: 146px;
		height: 44px;
		margin: 0 auto;
		margin-top: 24px;
		@include n-row2;
		padding: 0 22px;
		gap:18px;
		cursor: pointer;
		background: rgb(4,18,82);
		border: 1px solid rgba(20, 65, 193, 1);
		color: rgba(15, 255, 255, 1);
		font-size: 16px;
		>img{
			height: 20px;
		}
	}
}




.pdata:not([__null__]){
	padding-bottom: 40px;
	@include n-scrollbar;
	height: 100vh;
	overflow: auto;
	background:  rgb(6,11,53) url(../images/34.png) no-repeat center bottom / cover;
	.pdata-main{
		margin-top: 24px;
		background: url(../images/36.png) no-repeat center bottom / cover;
		position: relative;
		>footer{
			height: 70px;
			@include n-row2;
			color: #fff;
			font-size: 18px;
			background: linear-gradient(0deg, rgba(16,27,117,0.5) 0%, rgba(0,5,47,0) 100%);
			>em{
				color: rgba(255, 194, 142, 1);
				margin-left: 7px;
			}
		}
	}
	.pdata-green{
		color: rgba(159, 216, 63, 1) !important;
	}
	.pdata-map{
		height: 720px;
		>img{
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}
	.pdata-tabs{
		position: absolute;
		left: 50%;
		top: 24px;
		transform: translate(-50%);
		z-index: 2;
		font-size: 18px;
		height: 32px;
		@include n-row2;
		align-items: stretch;
		color: rgba(158, 185, 253, 1);
		>li{
			flex: 0 0 88px;
			width: 0;
			@include n-row2;
			cursor: pointer;
			background: url(../images/31.png) no-repeat center / 100% 100%;
		}
		.pdata-tabs-cur{
			color: #fff;
			background: url(../images/32.png) no-repeat center / 100% 100%;
			
			
		}
	}
	.pdata-menu{
		position: absolute;
		left: 24px;
		top: 24px;
		bottom: 24px;
		width: 64px;
		>li{
			width: 100%;
			height: 64px;
			cursor: pointer;
			@include n-col2;
			align-items: center;
			font-size: 24px;
			color: #fff;
			background: url(../images/11.png) no-repeat center / 100% 100%;
			&+li{
				margin-top: 4px;
			}
			&.pdata-menu-cur{
				background: url(../images/9.png) no-repeat center / 100% 100%;
			}
		}
	}
	.pdata-btn{
		cursor: pointer;
		margin: 0 auto;
		width: 420px;
		margin-top: 32px;
		height: 104px;
		padding: 0 32px;
		@include n-row1;
		gap:10px;
		align-items: center;
		background: rgb(17,31,112);
		border: 1px solid rgba(20, 65, 193, 1);
		>img{
			height: 62px;
		}
		>p{
			flex: 1;
			width: 0;
			text-align: center;
			font-size: 24px;
			color: #fff;
		}
	}
}


.plogin:not([__null__]){
	height: 100vh;
	overflow: hidden;
	@include n-col1;
	align-items: stretch;
	background:  rgb(6,11,53) url(../images/37.png) no-repeat center bottom / cover;
	
	.plogin-main{
		margin: auto 0;
		align-self: center;
		background:  url(../images/38.png) no-repeat center  / 100% 100%;
		width: 526px;
		height: 574px;
		@include n-col1;
		padding: 130px 57px 0 57px;
		align-items: stretch;
		>p{
			font-size: 18px;
			color: rgba(158, 185, 253, 1);
			margin-bottom: 12px;
			line-height: 1;
		}
		>h3{
			@include n-row1;
			height: 40px;
			margin-bottom: 20px;
			>input{
				border: 1px solid rgba(20, 65, 193, 1);
				background: rgba(0, 6, 56, 1);
				padding: 0 24px;
				font-size: 18px;
				height: 100%;
				color: #fff;
				@include placeholder;
				width: 100%;
				flex: 1;
			}
			>img{
				flex-shrink: 0;
				width: 105px;
				height: 100%;
			}
		}
		>h4{
			@include n-row3;
			margin-top: -7px;
			font-size: 16px;
			line-height: 1;
			color: rgba(158, 185, 253, 1);
			&:hover{
				opacity: 0.9;
			}
		}
		>button{
			margin-top: 10px;
			color: #fff;
			font-size: 30px;
			height: 70px;
			@include n-row2;
			border: 0;
			background: none;
		}
	}
	.plogin-footer{
		font-size: 18px;
		color: rgba(140, 169, 251, 1);
		background: rgba(0, 11, 58, 1);
		height: 80px;
		@include n-row2;
	}
	
}


.preset:not([__null__]){
	
	.preset-main{
		background:  url(../images/39.png) no-repeat center  / 100% 100%;
		padding: 70px 57px 0 57px;
		>h1{
			color: #fff;
			text-align: center;
			font-size: 24px;
			line-height: 1;
			margin-bottom: 10px;
		}
		>h2{
			font-size: 14px;
			color: rgba(158, 185, 253, 1);
			line-height: 1.6;
			text-align: center;
			max-width: 360px;
			align-self: center;
			width: 100%;
			margin-bottom: 10px;
		}
		>h5{
			@include n-row1;
			margin-bottom: 20px;
			>button{
				height: 40px;
				background: #0D1E63;
				border: 1px solid #1441C1;
				padding: 0 11px;
				font-size: 18px;
				color: #fff;
			}
		}
		>h6{
			>button{
				height: 50px;
				width: 100%;
				background: rgb(20,65,193);
				@include n-row2;
				border: 0;
				font-size: 27px;
				color: #fff;
				box-shadow: 0 0 10px 1px rgb(29,92,215), 0 0 10px 1px rgb(29,92,215) inset;
			}
		}
		>a{
			margin-top: 30px;
			height: 55px;
			font-size: 16px;
			color: #fff;
			width: 140px;
			align-self: center;
			@include n-row2;
		}
	}


}





